<template>
  <div class="step_05">
    <div id="container"></div>
    <div>
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="文字">
          <el-input v-model="formData.text" @change="textChange"></el-input>
        </el-form-item>
        <el-button @click="toJSON">toJSON</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Graph, Shape, Node } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      data: {
        nodes: [
          {
            id: "node1",
            shape: "rect",
            x: 100,
            y: 100,
            width: 100,
            height: 50,
            attrs: {
              label: {
                text: "矩形"
              }
            },
            data: {
              name: "zml",
              age: 18
            }
          },
          {
            id: "node2",
            shape: "circle",
            x: 200,
            y: 200,
            width: 100,
            height: 50,
            attrs: {
              label: {
                text: "圆形"
              }
            },
            data: {
              name: "zml",
              age: 18
            }
          },
        ],
      },
      formData: {
        text: ""
      }
    };
  },
  methods: {
    textChange() {
      this.curCel.attr('label/text', this.formData.text)
    },
    toJSON() {
      console.log(this.graph.toJSON());
    }
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
    this.graph.on('cell:click', ({ cell }) => {
      if (this.curCel) this.curCel.attr('body/stroke', null)
      this.curCel = cell;
      this.curCel.attr('body/stroke', 'red')
      console.log(cell.getAttrs())
      console.log(cell.getData())
      let labelText = null;
      if (cell.getAttrs()?.text?.text) labelText = cell.getAttrs()?.text?.text
      if (cell.getAttrs()?.label?.text) labelText = cell.getAttrs()?.label?.text
      this.formData.text = labelText;
      // console.log(e, x, y, cell, view);
      // console.log(event, 'event');
    })
  },
};
</script>
<style scoped>
.step_05 {
  display: flex;
}
</style>